<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        .aui-searchbar-wrap {
            background-color: #e62442;
        }
        .aui-text-info {
            color: #fff !important;
        }
        #header {
            background-color: #e62442;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div class="aui-searchbar-wrap demo" id="search">
        <div class="aui-searchbar aui-border-radius" tapmode onclick="doSearch()">
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">请输入地址</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                <input type="text" placeholder="请输入搜索地址" id="search-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/zepto.js" ></script>
<script type="text/javascript">
    $('#search-input').bind('input propertychange', function() {
        var content = $(this).val();
        api.sendEvent({
            name: 'searchPointChangeEvent',
            extra: {
                content: content
            }
        });
     });

    apiready = function(){
        $('.aui-searchbar-text').click();

        $api.fixStatusBar(header);
        var headerH = $('#header').height();
        city_name = api.pageParam.city_name;
        api.openFrame({
            name: 'chose_address_frame',
            url: 'chose_address_frame.html',
            rect: {
                x: 0,
                y: 50+headerH,
                w: 'auto',
                h: api.winHeight - 50 - headerH
            },
            bounces: true,
            pageParam:{
                city_name:city_name
            }
        });
        api.parseTapmode();
    }
    function doSearch(){
        $api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
        $api.dom('.aui-searchbar-input input').focus();
        api.sendEvent({
            name: 'toSearchEvent',
            extra: {
            }
        });

    }
    function cancelSearch(){
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus");
        $api.val($api.byId("search-input"),'');
        $api.dom('.aui-searchbar-input input').blur();
        api.closeWin();
    }
    function clearInput(){
        $api.val($api.byId("search-input"),'');
    }
    function search(){
        var content = $api.val($api.byId("search-input"));
        if(content){

        }else{
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        // cancelSearch();
    }
</script>
</html>